<template>
    <div>
        <Card :bordered="false">
            <div class="proname">
                <Row>
                    <i-col class="proname-title" :lg="{ span: 24}">
                        <h3>{{ ProName }}</h3>
                    </i-col>
                </Row>
            </div>
        </Card>
        <global-tables @changePage="handleChangePage" :total="total" @handleAllSelect="handleAllSelect" :list="list" :loading="loading" :columns="columns" :current="search.Page">
            <Form :model="search" :label-width="80">
                <div class="table-top-wrap">
                    <div>
                        <div>
                            <Button class="features-btn" @click="handleBtnClick(null,'add')">
                                <Icon type="md-add" size="18" />新建
                            </Button>
                            <Button class="features-btn btn-auto-m" @click="handleBtnClick(null,'delete')">
                                <Icon class="btn btn-auto-m" type="md-trash" size="18" />删除
                            </Button>
                        </div>
                    </div>
                    <div class="table-top-wrap-bottom"></div>
                </div>
            </Form>
        </global-tables>
        <Modal :mask-closable="false" v-model="isModal" :title="ModalTitle" width="600">
            <div v-if="isModal">
                <Form ref="formItem" :model="formItem" :rules="ruleValidate" :label-width="100">
                    <Row>
                        <i-col :lg="{ span: 12}">
                            <FormItem label="规格名称" prop="SpecName">
                                <i-input v-model="formItem.SpecName" placeholder="请输入规格名称"></i-input>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 12}">
                            <FormItem label="原价" prop="PriceOld">
                                <InputNumber class="input-number" v-model="formItem.PriceOld" placeholder="请输入原价"></InputNumber>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 12}">
                            <FormItem label="现价" prop="PriceNew">
                                <InputNumber class="input-number" v-model="formItem.PriceNew" placeholder="请输入现价"></InputNumber>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 12}">
                            <FormItem label="佣金" prop="Commission">
                                <InputNumber class="input-number" v-model="formItem.Commission" placeholder="请输入佣金"></InputNumber>
                            </FormItem>
                        </i-col>
                    </Row>
                </Form>
            </div>
            <div slot="footer">
                <Button size="large" @click="handleClose">取消</Button>
                <Button type="primary" size="large" @click="handleSubmit('formItem')">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
/**
 * 商品规格
 */
import GlobalTables from "@/components/GlobalTables";
import Api from "./service";
export default {
    name: "ProductListNorm",
    components: {
        GlobalTables
    },
    data() {
        return {
            list: [],
            itemId: 0,
            allSelectArr: null,
            ProName: sessionStorage.getItem("ProName"),
            loading: true,
            formItem: {},
            ruleValidate: {
                SpecName: [
                    {
                        required: true,
                        message: "请输入规格名称",
                        trigger: "change"
                    }
                ],
                PriceOld: [
                    {
                        required: true,
                        type: "number",
                        message: "请输入原价",
                        trigger: "change"
                    }
                ],
                PriceNew: [
                    {
                        required: true,
                        type: "number",
                        message: "请输入现价",
                        trigger: "change"
                    }
                ],
                Commission: [
                    {
                        required: true,
                        type: "number",
                        message: "请输入佣金",
                        trigger: "change"
                    }
                ]
            },
            isEdit: false,
            isProhibit: false,
            total: 0,
            isModal: false,
            ModalTitle: "新建会员",
            search: {
                keyword: "",
                pageindex: 1,
                pagesize: 10
            },
            /* 表头 */
            columns: [
                {
                    type: "selection",
                    width: 60,
                    align: "center"
                },
                {
                    title: "规格名称",
                    key: "SpecName"
                },
                {
                    title: "商品SKU",
                    key: "SKU"
                },
                {
                    title: "原价",
                    key: "PriceOld"
                },
                {
                    title: "现价",
                    key: "PriceNew"
                },
                {
                    title: "佣金",
                    key: "Commission"
                }
            ]
        };
    },
    methods: {
        /* 关闭对话框 */
        handleClose() {
            this.isModal = false;
        },
        /* 提交 */
        handleSubmit(name) {
            const { formItem, itemId } = this;
            this.$refs[name].validate(valid => {
                if (valid) {
                    let data = {
                        ...formItem,
                        ID: itemId,
                        PID: parseInt(this.$route.params.id),
                        SKU: this.$route.params.sku,
                        ProName: sessionStorage.getItem("ProName")
                    };
                    Api.addNormTablesItem(data).then(res => {
                        if (res.state == "success") {
                            this.$Message.success("操作成功");
                            this.loading = true;
                            this.isModal = false;
                            this.getTablesListData();
                        } else {
                            this.$Message.error(res.message);
                        }
                    });
                }
            });
        },
        /* 表格数据请求 */
        getTablesListData() {
            const data = this.search;
            Api.getNormTablesList(data).then(res => {
                this.list = res.data.rows;
                this.loading = false;
                this.total = res.data.records;
            });
        },
        /* 表格查询 */
        handleSearch() {
            this.loading = true;
            this.getTablesListData();
        },
        /* 表格分页方法 */
        handleChangePage(type, page) {
            this.loading = true;
            if (type == "page") {
                this.search.pageindex = page;
                this.getTablesListData();
            } else {
                this.search.pagesize = page;
                this.getTablesListData();
            }
        },
        /* 对话框 */
        handleBtnClick(item, type) {
            this.ModalTitle = "新建规格";
            this.formItem = this.initFormItem();
            if (type == "edit" || type == "add") {
                this.itemId = 0;
                this.isModal = true;
                if (type == "edit") {
                    this.itemId = item.ID;
                    this.ModalTitle = "编辑规格";
                    Api.getItemInfo({
                        id: item.ID
                    }).then(res => {
                        this.itemId = item.ID;
                        this.formItem = {
                            ...res.data,
                            Sex: res.data.Sex + "",
                            IsMarry: res.data.IsMarry + ""
                        };
                    });
                }
            } else if (type === "delete") {
                if (this.allSelectArr) {
                    this.$Modal.confirm({
                        title: `你确定要删除吗`,
                        onOk: () => {
                            Api.deleteNormItem({
                                ids: this.allSelectArr
                            }).then(res => {
                                if (res.state == "success") {
                                    this.$Message.success(res.message);
                                    this.allSelectArr = "";
                                } else {
                                    this.$Message.error(res.message);
                                }
                                this.getTablesListData();
                            });
                        },
                        onCancel: () => {
                            this.$Message.info("取消成功");
                        }
                    });
                } else {
                    this.$Message.error("请先选择需要操作的记录");
                }
            }
        },
        /* 表单数据 */
        initFormItem() {
            return {
                SpecName: "",
                PriceOld: 0,
                PriceNew: 0,
                Commission: 0
            };
        },
        /* 表单校验 */
        initRuleValidate() {
            return {};
        },
        /* 复选框选中 */
        handleAllSelect(list) {
            let arr = [];
            for (let item in list) {
                arr.push(list[item].ID);
                arr.join(",");
            }
            arr = arr.join(",");
            this.allSelectArr = arr;
        }
    },
    mounted() {
        const { id } = this.$route.params;
        this.search.keyword = id;
        /* 列表请求 */
        this.getTablesListData();
    }
};
</script>

<style lang="less" scoped>
.input-number {
    width: 185px;
}

.proname-title {
    width: 100%;
}
</style>

